<el-dialog
	title="{lang storage_location_add}"
	:close-on-click-modal="false"
	@closed="AddDialogClose"
	width="100%"
	style="max-width:600px"
	v-model="AddDialog.dialogVisible">
	<el-form ref="AddDialogref" :model="AddDialog" label-width="200px">
		<el-form-item class="title" label="{lang qocs_api}"></el-form-item>
		<el-form-item 
			prop="coludname"
			label="{lang storage_location}：" >
			<el-input class="maxWidth " v-model="AddDialog.coludname"></el-input>
		</el-form-item>
		<el-form-item
			prop="appid"
			label="appid：" 
			:rules="{required: true, message: 'appid {lang unallow_empty}', trigger: 'blur'}">
			<el-input class="maxWidth " v-model="AddDialog.appid"></el-input>
		</el-form-item>
		<el-form-item 
			prop="appkey"
			label="secretid："
			:rules="{required: true, message: 'secretid {lang unallow_empty}', trigger: 'blur'}">
			<el-input class="maxWidth " v-model="AddDialog.appkey"></el-input>
		</el-form-item>
		<el-form-item 
			prop="appsecret"
			label="sercertkey："
			:rules="{required: true, message: 'sercertkey {lang unallow_empty}', trigger: 'blur'}">
			<el-input class="maxWidth " v-model="AddDialog.appsecret"></el-input>
		</el-form-item>
		<el-form-item class="title" label="{lang bucket_settings}"></el-form-item>
		<el-form-item 
			prop="bucket"
			label="{lang bucket_name}："
			:rules="{required: true, message: '{lang bucket_name}{lang unallow_empty}', trigger: 'blur'}">
			<el-input class="maxWidth " v-model="AddDialog.bucket"></el-input>
		</el-form-item>
		<el-form-item 
			prop="region"
			label="{lang bucket_region}："
			:rules="{required: true, message: '{lang bucket_region}{lang unallow_empty}', trigger: 'blur'}">
			<el-input class="maxWidth " v-model="AddDialog.region"></el-input>
			<p class="tipTxt" style="margin: 0;">{lang example}：ap-beijing</p>
		</el-form-item>
		<el-form-item 
			prop="realmname"
			label="{lang visit_domain}："
			:rules="{required: true, message: '{lang visit_domain}{lang unallow_empty}', trigger: 'blur'}">
			<el-input class="maxWidth " v-model="AddDialog.realmname"></el-input>
		</el-form-item>
	</el-form>
	<span #footer class="dialog-footer" style="display:block;text-align: right">
		<el-button :loading="AddDialog.btnloading" @click="AddDialog.dialogVisible = false;">{lang cancel}</el-button>
		<el-button type="primary" @click="AddDialogSubmit" :loading="AddDialog.btnloading">{lang confirms}</el-button>
	</span>
</el-dialog>
<script type="text/javascript">
	var AddDialogMixin = {
		data(){
			return {
				AddDialog:{
					btnloading:false,
					dialogVisible:false,
					bz:'',
					coludname:'{lang tx_qcos}',
					appid:'',
					appkey:'',
					appsecret:'',
					bucket:'',
					region:'',
					realmname:''
				},
			}
		},
		methods:{
			AddDialogSubmit(){
				var self = this;
				self.$refs.AddDialogref.validate(async function(valid){
					if(valid){
						self.AddDialog.btnloading = true;
						var res = await axios.post(MOD_URL+'&op=storagesetting&do=addspace',{
							addspace:true,
							formhash:'{FORMHASH}',
							bz:self.AddDialog.bz,
							extra:self.AddDialog.appid,
							access_id:self.AddDialog.appkey,
							access_key:self.AddDialog.appsecret,
							bucket:self.AddDialog.bucket,
							region:self.AddDialog.region,
							host:self.AddDialog.realmname,
							coludname:self.AddDialog.coludname,
						});
						if(res == 'intercept'){
							return false;
						}
						var json = res.data;
						if(json.success){
							window.location.reload();
						}else{
							self.$message.error(json.msg);
							self.AddDialog.btnloading = false;
						}
					}
				})
			},
			AddDialogClose(){
				var self = this;
				self.$refs.AddDialogref.resetFields();
			}
		}
	}
</script>